<!--
    报价明细
 -->
<template>

  <div class="detail-header">
    <a-page-header :title="detail.cuttingName">
      <template #extra>
        <a-button @click="toEditQuotation" type="primary">编辑</a-button>
      </template>
      <div>
        <a-descriptions size="small" :column="3">
          <a-descriptions-item label="文件">
            <FilePreview :file-list="detail.cuttingFile" type="picture" />
          </a-descriptions-item>
          <a-descriptions-item label="预计完成时间">{{ detail.exceptCompleteTime}}</a-descriptions-item>
          <a-descriptions-item label="状态">{{ detail.status}}</a-descriptions-item>
          <a-descriptions-item label="备注">{{ detail.remark}}</a-descriptions-item>
        </a-descriptions>
      </div>
    </a-page-header>
  </div>

  <a-card
      class="smart-margin-top10"
      size="small">
    <a-tabs>
      <a-tab-pane key="outbound" tab="出库管理" >
        <OutboundInfoList :cuttingId="cuttingId" />
      </a-tab-pane>
    </a-tabs>
    <ProjectInfoForm  ref="operateRef" />
  </a-card>
</template>

<script setup>
  import {reactive, ref, onMounted, watch} from 'vue';
  import { SmartLoading } from '/src/components/framework/smart-loading';
  import { cuttingInfoApi } from '/src/api/business/project/cutting-info-api';
  import { PAGE_SIZE_OPTIONS } from '/src/constants/common-const';
  import { smartSentry } from '/src/lib/smart-sentry';
  import {useRoute, useRouter} from "vue-router";
  import ProjectInfoForm from "/@/views/business/erp/project/project-info-form.vue";
  import QuotationItemList from "/@/views/business/erp/project/components/quotation-item-list.vue";
  import CuttingInfoList from "/@/views/business/erp/project/components/cutting-info-list.vue";
  import OutboundInfoList from "/@/views/business/erp/project/components/outbound-info-list.vue";
  import FilePreview from "/@/components/support/file-preview/index.vue";

  const route = useRoute();

  // let projectId = ref();
  let cuttingId = ref();
  onMounted(() => {
    if (route.query.cuttingId) {
      cuttingId.value = Number(route.query.cuttingId);
      getDetail();
    }
  });

  // 详情
  let detail = ref({});

  async function getDetail() {
    try {
      let result = await cuttingInfoApi.sortDetail(cuttingId.value);
      detail.value = result.data;
    } catch (error) {
      smartSentry.captureError(error);
    } finally {
      SmartLoading.hide();
    }
  }


  const columns = ref([
    {
      title: '品名',
      dataIndex: 'productName',
      ellipsis: true,
      customCell: (record, rowIndex) => {
        return {
          colSpan: record.type === 2 ? 4 : 1,
        };
      },
    },
    {
      title: '规格',
      dataIndex: 'specifications',
      ellipsis: true,
      customCell: (record, rowIndex) => {
        return {
          colSpan: record.type === 2 ? 0 : 1,
        };
      },
    },
    {
      title: '比重',
      dataIndex: 'specificWeight',
      ellipsis: true,
      width: 100,
      customCell: (record, rowIndex) => {
        return {
          colSpan: record.type === 2 ? 0 : 1,
        };
      },
    },
    {
      title: '用量',
      dataIndex: 'usagee',
      ellipsis: true,
      width: 100,
      customCell: (record, rowIndex) => {
        return {
          colSpan: record.type === 2 ? 0 : 1,
        };
      },
    },
    {
      title: '单价',
      dataIndex: 'unitPrice',
      ellipsis: true,
      width: 100,
    },
    {
      title: '金额',
      dataIndex: 'sumOfMoney',
      ellipsis: true,
      width: 100,
    },
    {
      title: '备注',
      dataIndex: 'remark',
      ellipsis: true,
    }
  ]);

  let router = useRouter();
  function toEditQuotation() {
    router.push({ path: '/erp/project/components/quotation-form',
      query: { projectId: projectId.value, quotationId: quotationId.value } });
  }


</script>

<style scoped lang="less">
  .detail-header {
    background-color: #fff;
    padding: 10px;
  }
</style>